<table>
	<tr>
		<td valign="top">
			<div style="min-height:650px">
				<div>[:list:]</div>
				<div style="margin-top:20px">
					<h3 style="margin-bottom:5px">Upload new photo</h3>
					<div>[:upload:]</div>
				</div>
			</div>
		</td>
		<td valign="top" style="padding-top:6px">[:edit:]</td>
	</tr>
</table>
<script>
var listName = '[:listName:]';
var editName = '[:editName:]';
$('[:uploadName:]').uploadComplete = function(){
	$(listName).control.forceRefresh();
};
var editBoxes = [];
$(listName).control.observe('loadPhoto', function(photoId){
	var c = $(editName).control;
	if (photoId in editBoxes)
	{
		var wrapper = c.up();
		wrapper.update(editBoxes[photoId]);
		c.loadView(wrapper.down());
        c.loadPhoto(photoId);
	}
	else
	{
		c.loadPhoto(photoId);
        c.setAction('');
		c.refresh();
	}
});
$(editName).control.observe('ajaxcomplete', function(memo){
	if (memo.action == 'DeletePhoto') $(listName).control.selectNext().forceRefresh();
	var photoId = $(editName).control.photoId;
	editBoxes[photoId] = $(editName);
});
$(editName).control.observe('setDefault', function(photoId){
	$(listName).control.setDefaultPhoto(photoId);
});
</script>